<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>小工具</el-breadcrumb-item>
      <el-breadcrumb-item>成本预估</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <h2>实时资源</h2>
      <el-form :inline="true" :model="taskResource" class="form-inline">
        <el-form-item label="CPU：">
          <el-input v-model="taskResource.realtimeCpu" placeholder="核数"></el-input>
        </el-form-item>
        <el-form-item label="内存：">
          <el-input v-model="taskResource.realtimeMemory" placeholder="内存使用量（G）"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="realtimeSubmit">计算</el-button>
        </el-form-item>
        <br>
        <el-form-item label="费用：">
          <el-input v-model="taskResource.realtimeCost" style="width: 600px;" placeholder="单位（元）"></el-input>
        </el-form-item>
      </el-form>

      <h2>离线资源</h2>
      <el-form :inline="true" :model="taskResource" class="form-inline">
        <el-form-item label="CPU：">
          <el-input v-model="taskResource.offlineCpu" placeholder="核数"></el-input>
        </el-form-item>
        <el-form-item label="内存：">
          <el-input v-model="taskResource.offlineMemoryr"  placeholder="内存使用量（G）"></el-input>
        </el-form-item>
        <el-form-item label="运行时长：">
          <el-input v-model="taskResource.runTime" placeholder="单位（分钟）"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="offlineSubmit">计算</el-button>
        </el-form-item>
        <br>
        <el-form-item label="费用：">
          <el-input v-model="taskResource.offlineCost"  style="width: 600px;" placeholder="单位（元）"></el-input>
        </el-form-item>
      </el-form>

      <h2>存储资源</h2>
      <el-form :inline="true" :model="taskResource" class="form-inline">
        <el-form-item label="存储大小：">
          <el-input v-model="taskResource.storageSize" placeholder="单位（G）"></el-input>
        </el-form-item>
        <el-form-item label="存储时长：">
          <el-input v-model="taskResource.storageDay" placeholder="单位（天）"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="storageSubmit">计算</el-button>
        </el-form-item>
        <br>
        <el-form-item label="费用：">
          <el-input v-model="taskResource.storageCost"  style="width: 600px;" placeholder="单位（元）"></el-input>
        </el-form-item>
      </el-form>

    </el-card>

  </div>
</template>
<script>

export default {
  data() {
    return {
      taskResource: {
        // 使用cpu
        realtimeCpu: '',
        // 使用内存资源
        realtimeMemory: '',
        // realtime使用费用
        realtimeCost: '',

        // 使用cpu
        offlineCpu: '',
        // 使用内存资源
        offlineMemory: '',
        // 使用时间
        runTime: '',
        // realtime使用费用
        offlineCost: '',

        // 存储时长
        storageDay: '',
        // 存储大小
        storageSize: '',
        // realtime使用费用
        storageCost: ''
      },
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  created() {
  },
  methods: {
    offlineSubmit() {
      var hwofflineCost = (Math.max(this.taskResource.offlineCpu * 1, this.taskResource.offlineMemory / 4) * 0.037 * this.taskResource.runTime).toFixed(2) + '元/月'
      var aliofflineCost = (Math.max(this.taskResource.offlineCpu * 1, this.taskResource.offlineMemory / 4) * 0.034 * this.taskResource.runTime).toFixed(2) + '元/月'
      this.taskResource.offlineCost = '华为费用:' + hwofflineCost + '  ，阿里费用:' + aliofflineCost
    },
    realtimeSubmit() {
      var hwrealtimeCost = Math.max(this.taskResource.realtimeCpu * 1, this.taskResource.realtimeMemory / 4) * 53.53 + '元/月'
      var alirealtimeCost = Math.max(this.taskResource.realtimeCpu * 1, this.taskResource.realtimeMemory / 4) * 49.632 + '元/月'
      this.taskResource.realtimeCost = '华为费用:' + hwrealtimeCost + '  ，阿里费用:' + alirealtimeCost
    },
    storageSubmit() {
      var hwStorageCost = this.taskResource.storageSize * this.taskResource.storageDay / 30 * 0.09 + '元/月'
      var aliStorageCost = this.taskResource.storageSize * this.taskResource.storageDay / 30 * 0.12 + '元/月'
      this.taskResource.storageCost = '华为费用:' + hwStorageCost + '  ，阿里费用:' + aliStorageCost
    }
  }
}
</script>

<style lang="less" scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
